<link rel="stylesheet" type="text/css" href="assets/bootstrap-datepicker/css/datepicker.css" />

<section id="main-content">
  <section class="wrapper">
    <!--state overview end-->
    <div class="row">
      <div class="col-lg-12">
        <div class="alert alert-block alert-danger fade in">
          <button data-dismiss="alert" class="close close-sm" type="button">
            <i class="icon-remove"></i>
          </button>
          <strong>友情提示：</strong><br/>
          1、本页面用于客服人员按照实际投入填写项目投入工时，填写时候最小时间单位为1个小时，一天所有项目最多加起来可填写24小时;<br/>
          2、同一个项目在同一天只能填写一次，如果需要修改该项目工时，请先删除再重新填写;<br/>
          3、系统在每个月2号会锁定上个月填写信息，不允许对上个月工时以及之前数据进行填写和删除;<br/>
          4、如果不能填写工时，请联系项目经理及时添加客服角色。
        </div>
        <section class="panel">
          <header class="panel-heading">
            项目工时
          </header>
          <div class="panel-body">
            <div class="form-group customerForm">
              <label class="col-sm-2 control-label">所属项目*</label>
              <div class="col-sm-10">
                <input type="text" value="" class="form-control"
                  id="proName" name="proName" autocomplete="off" placeholder="自动检索项目名称" />
                <input type="hidden" value="" id="proId" name="proId" />
              </div>
            </div>
            <div class="form-group customerForm">
              <label class="col-sm-2 control-label">完成周期*</label>
              <div class="col-sm-10">
                <input id="datetime" style="width: 25%;display:initial;" name="startTime" type="text" value=""
                       class="form-control" disabled placeholder="开始时间">
                至
                <input id="datetime-1" style="width: 25%;display:initial;" name="endTime" type="text" value=""
                       class="form-control" placeholder="结束时间" autocomplete="off">
              </div>
            </div>
            <div class="form-group" id="content">
              <label class="col-sm-2 control-label"></label>
              <div class="col-sm-10">
              </div>
            </div>
            <!--<div class="form-group customerForm">-->
              <!--<label class="col-sm-2 control-label">事由*</label>-->
              <!--<div class="col-sm-10">-->
                <!--<textarea class="form-control" autocomplete="off" onkeyup="this.value=this.value.replace(/\s+/g,'')" maxlength="120"-->
                  <!--placeholder="字符长度限制(120字以内)" id="comments"></textarea>-->
              <!--</div>-->
            <!--</div>-->
            <p class="default-buttons">
              <button class="button-next  btn btn-info tj">提交</button>
            </p>
          </div>
        </section>

        <section class="panel">
          <header class="panel-heading">
            我的记录
          </header>
          <div class="panel-body">
            <div id="myplogContainer" class="dlshouwen-grid-container"></div>
            <div id="myplogToolBarContainer" class="dlshouwen-grid-toolbar-container"></div>
          </div>
        </section>
      </div>
    </div>
  </section>
</section>
<script type="text/javascript" src="assets/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/autocomplete/jquery.autocomplete.js"></script>
<script src="js/prolog/index.js"></script>
<script type="text/javascript">
    $("#content").hide();
    $('#datetime').datepicker({
        format: 'yyyy-mm-dd'
    });
    $('#datetime-1').datepicker({
        format: 'yyyy-mm-dd'
    }).on('changeDate', function (e) {
        var date = new Date($("#datetime-1").val().replace(/-/, "/").replace("-", "/"));
        //计算相差多少天
        var d = new Date();
        var time = d.getTime() - date.getTime();
        var days = parseInt(time / (1000 * 60 * 60 * 24));
        // if (days > 15) {
        //     layer.msg("结束日期不能超过当前日期15天");
        //     $("#datetime-1").val("");
        //     $("#datetime").val("");
        //     return;
        // }

        var weekDay = [7, 1, 2, 3, 4, 5, 6];
        if (weekDay[date.getDay()] != 5) {
            layer.msg("结束日期必须为星期五");
            $("#datetime-1").val("");
            $("#datetime").val("");
            $("#content").hide();
            return;
        } else {
            $("#content").show();
            //开始日期为结束日期的前6天
            var now = new Date(date.getTime() - 86400000 * 6);
            var year = now.getFullYear(),
                month = (now.getMonth() + 1).toString(),
                day = now.getDate().toString();
            if (month.length == 1) {
                month = '0' + month;
            }
            if (day.length == 1) {
                day = '0' + day;
            }
            var datetime = (year + '-' + month + '-' + day);
            $("#datetime").val(datetime);
            var timeStr = getAll(datetime,$("#datetime-1").val());
            var html="<table>";
            $("#content").find("div").html("");
            $CertusFormAjax.ajax('getWorkHoursByUser',{"logTimes":timeStr},function (result) {
                var data = JSON.parse(result.data);
                for (var i=0;i<data.length;i++){
                    var syInput = 24;
                    syInput = syInput - data[i].syWorks;
                    html+=`<tr>
                        <td><input type="text" class="form-control" readonly value="`+data[i].logTime+`"/></td>
                        <td><select class="form-control">
                        <option value="0">0</option>
                        <option value="4">4</option>
                        <option value="8">8</option>
                        <option value="12">12</option>
                        <option value="16">16</option>
                        <option value="20">20</option>
                        <option value="24">24</option>
                        </select></td>`;
                    if(syInput<=12){
                        html+=`<td>剩余工时:<span id="syWorks" style="color: #be1616;font-weight: 800;">`+syInput+`</span></td>
                        </tr>`;
                    }else{
                        html+=`<td>剩余工时:<span id="syWorks">`+syInput+`</span></td>
                        </tr>`;
                    }

                }
                html+="</table>";
                $("#content").find("div").append(html);
            });
        }
    });

    Date.prototype.format = function() {
        var s = '';
        s += this.getFullYear() + '-'; // 获取年份。
        if((this.getMonth() + 1) >= 10) {// 获取月份。
            s += (this.getMonth() + 1) + "-";
        } else {
            s += "0" + (this.getMonth() + 1) + "-";
        }
        if(this.getDate() >= 10) {// 获取日。
            s += this.getDate();
        } else {
            s += "0" + this.getDate();
        }
        return(s); // 返回日期。
    };
    function getAll(begin, end) {
        var ab = begin.split("-");
        var ae = end.split("-");
        var db = new Date();
        db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
        var de = new Date();
        de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
        var unixDb = db.getTime();
        var unixDe = de.getTime();
        var str = "";
        for(var k = unixDb + 24 * 60 * 60 * 1000; k < unixDe;) {
            str += (new Date(parseInt(k))).format() + ",";
            k = k + 24 * 60 * 60 * 1000;
        }
        //算上开始日期和结束日期
        str=begin+","+str+end;
        return str;
    }
</script>